@import "./../themes/_theme";
@import "./../helpers/mixin";

/**
*模拟field输入框
*写法：
<row class="bor-bot mint-cell mint-field imitate-field" align="center">
  <coll>宠物种类</coll>
  <coll hor="right">
    <span class="imitate-holder">请选择</span>
    <icon-svg icon-class="xiangyoujiantou"></icon-svg>
  </coll>
</row>
**/
.imitate-field{
  padding: 0 10px;
  font-size: 16px;
}
.imitate-holder{
  color: $FontDark;
}
.coupon-menu_list {
  .coupon-menu_item {
    position: relative;
    margin: .2rem .3rem;
    background: $bgWhite;
    border-radius: 5px;
    .coupon-menu_item_top {
      position: relative;
      height: 2.4rem;
      border-radius: 5px;
      &.desc-expend {
        @include boxshadow(0, .18rem, 8px, $grey400);
      }
      .coupon-menu_item_header {
        position: relative;
        background: $bgOrange;
        &.used {
          background: $bgGrayest;
        }
        height: 2.4rem;
        width: 2.04rem;
        border-radius: 5px 0 0 5px;
        @include circleCorner(before, tr, .5rem, $bgGray);
        @include circleCorner(after, br, .5rem, $bgGray);
        &.desc-expend {
          @include circleCorner(after, br, .5rem, $grey400);
        }

        .c-box {
          width: 100%;
          position: absolute;
          text-align: center;
          color: $FontWhite;
          @include absoYCenter();
          &.single {
            p {
              @include fontDpr(25px);
            }
          }
          &.multi {
            p:first-child {
              @include fontDpr(25px);

            }
            p:last-child {
              @include fontDpr(12px);
            }
          }
        }
      }
      .coupon-menu_item_info {
        position: relative;
        padding: .3rem .3rem .15rem;
        border-radius: 0 5px 5px 0;
        background: $bgWhite;
        @include circleCorner(before, tl, .5rem, $bgGray);
        @include circleCorner(after, bl, .5rem, $bgGray);
        &.desc-expend {
          @include circleCorner(after, bl, .5rem, $grey400);
        }
        h2 {
          line-height: 1.5;
          padding-right: .1rem;
          margin-bottom: .34rem;
          @include fontDpr(14px);
          @include doubleLimitWidth(2);
          overflow: hidden;
          span {
            border-radius: 2px;
            background: $bgOrange;
            padding: 2px 3px;
            margin-right: .2rem;
            @include fontDpr(12px);
            &.used {
              background: $bgGray;
            }
          }
        }
        .info_time {
          color: $FontDark;
          position: relative;
          padding-bottom: .17rem;
          line-height: .4rem;
          border-bottom: 1px dashed $bgGray;
          @include notStatic(absolute, auto, .3rem, .5rem, .3rem);
          .mint-button {
            font-size: inherit;
            height: .4rem;
            @include notStatic(absolute, auto, 0, auto, auto);
          }
        }
        .info_desc {
          position: relative;
          color: $FontDark;
          @include notStatic(absolute, auto, .3rem, .15rem, .3rem);

          .right {
            @include notStatic(absolute, 0, 0, auto, auto);
            @include fontDpr(18px);
            padding: 2px;
          }
        }
        .info_used {
          @include notStatic(absolute, .77rem, 0, auto, auto);
          border-radius: 50%;
          width: 1rem;
          height: 1rem;
          background: $bgWhite;
          color: $FontDark;
          //transform: rotate(-25deg);
        }
      }
    }
    .desc {
      z-index: 1;
      padding: .2rem .3rem .2rem .5rem;
      list-style: disc;
      @include fontDpr(14px);
      color: $FontDarker;
    }
  }

}

.pet-info {
  position: relative;
  margin-bottom: .2rem;
  &.mgbtmc {
    &:before {
      content: ' ';
      width: 100%;
      height: .2rem;
      background-color: $bgGray;
      @include notStatic(absolute, auto, 0, -.2rem, 0, 1);
    }
  }
  .pet-info_title {
    @include fontDpr(16px);
    font-weight: 500;
    span {
      padding: 1px 4px;
      @include borRadius(4px);
      @include fontDpr(14px);
      margin-left: .15rem;
      color: $fontYellow;
      border: 1px solid $borderWarning;
    }
  }
  p {
    margin-top: .2rem;
    color: $FontDark;
  }
  .oper {
    @include fontDpr(16px);
    color: $FontDarker;
    @include notStatic(absolute, 50%, .2rem, 0, auto, 7);
    transform: translateY(-50%);
  }
}


.order-menu_list {
  .order-item {
    margin: .3rem;
    border-radius: 6px;
  }
  .item-header {
    padding: 0.24rem .3rem .22rem;
    border-radius: 6px 6px 0 0;
    background-color: #fff;
    position: relative;
    height: .7rem;
    line-height: .7rem;
    @include oneRectangle;
    @include fontDpr(13px);
    color: $FontDarkest;
    .header-status {
      @include fontDpr(14px);
    }
  }

  .item-body {
    position: relative;
    @include oneRectangle;

    h3 {
      @include fontDpr(16px);
      font-weight: 500;
    }
    p {
      color: $FontDark;
    }
    .service {
      @include fontDpr(13px);
      margin: .13rem 0 .2rem
    }
    .deliver {
      @include fontDpr(13px);
    }
  }
  .item-footer {
    border-radius: 0 0 6px 6px;
    height: .8rem;
    line-height: .8rem;
    .oper-btn {
      border: 2px solid $black200;
      padding: 4px 8px;
      @include borRadius(4px);
      @include fontDpr(11px);
    }
    .contact-price {
      @include fontDpr(10px);
    }
    .price {
      @include fontDpr(15px);
    }
  }

  .pic-container.pet-img-contain{
    margin-right: 0.4rem;
    width: 1.4rem;
    height: 1.25rem;
    overflow: hidden;
    border-radius: 4px;
  }

}
